<!--
 * @Author: your name
 * @Date: 2021-07-18 14:17:58
 * @LastEditTime: 2021-08-02 00:12:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \blog-work\src\pages\Index.vue
-->
<template>
    <div>
        <Layout>
            <!-- Page Header-->
            <header class="masthead" style="background-image: url('/img/home-bg.jpg')">
                <div class="container position-relative px-4 px-lg-5">
                    <div class="row gx-4 gx-lg-5 justify-content-center">
                        <div class="col-md-10 col-lg-8 col-xl-7">
                            <div class="site-heading">
                                <h1>Clean Blog</h1>
                                <span class="subheading">A Blog Theme by Start Bootstrap</span>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- Main Content-->
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <!-- <div v-for='tt in $page.titles.edges' :key='tt.node.id'>{{tt.node.id}}</div> -->
                        <!-- Post preview-->
                        <div class="post-preview" v-for='tt in $page.titles.edges' :key='tt.node.id'>
                            <a :href="'post/'+tt.node.id">
                                <h2 class="post-title">{{tt.node.title}}</h2>

                            </a>
                            <p class="post-meta">
                                <span v-for='tag in tt.node.tags' :key='tag.id' style="margin: 0px 10px;">{{tag.title}}</span>
                            </p>
                            <p class="post-meta">
                                {{tt.node.created_at}}
                            </p>
                            <hr class="my-4" />
                        </div>
                        <!-- Pager-->
                        <Pager :info="$page.titles.pageInfo" />
                        <div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
                    </div>
                </div>
            </div>
        </Layout>
    </div>
</template>
<page-query>

    query ($page: Int) {
    titles:allStrapiPosts(page:$page,perPage:2) @paginate{
    pageInfo {
    totalPages
    currentPage
    }
    edges {
    node {
    id
    tags {
    id
    title
    }
    title
    created_at
    }
    }
    }
    }
</page-query>

<script>
    import { Pager } from 'gridsome'
    export default {
        metaInfo: {
            title: 'Hello, world!'
        },
        components: {
            Pager
        }
    }
</script>

<style>
    .home-links a {
        margin-right: 1rem;
    }
</style>